<template>
    <div class="bg-white rounded-8px mb-20px">
        <div class="p-30px text-24px font-600 rounded-8px">{{ lessonData.name }}</div>
    </div>
    <div class="bg-white rounded-8px">
      <div class=" p-30px">
        <el-collapse v-model="activeNames" @change="handleChange">
            <block v-for="(item,index) in chapterList.chapter" :key="index" >
                <el-collapse-item :name="index" v-if="item.topic_count>0">
                    <template #title>
                        <div class="flex items-center justify-between w-900px">
                            <div class="flex items-center">
                                <div class="flex mr-10px text-red-500"><el-icon :size="20"><CirclePlus /></el-icon></div>
                                <div class="text-18px text-dark-500 font-weight-500">{{ item.chapter_name }}</div>
                            </div>
                            <div class="flex justify-between items-center w-150px">
                                <div class=" text-dark-300 font-weight-600 text-red-500">{{ item.topic_count }}</div>
                                
                            </div>
                            
                        </div>
                        
                        
                    </template>
                    <div v-if="item.sectionList" class="mx-30px">
                        <block v-for="(item2,index2) in item.sectionList" :key="index2">
                            <div class="flex justify-between items-center my-20px" v-if="item2.topic_count>0">
                                <div class="flex items-center mt-10px">
                                    <div class="flex mr-10px text-red-300"><el-icon :size="20"><Remove /></el-icon></div>
                                    <div class="text-16px text-dark-500 font-weight-500">{{ item2.section_name }}</div>
                                </div>
                                <div class="flex justify-between items-center w-150px">
                                    <div class=" text-red-300 font-weight-500">{{ item2.topic_count }}</div>
                                    <div class=""><el-button size="small" type="primary" @click="goExamDetail(1,item2.section_id)">开始做题</el-button></div>
                                </div>
                            </div>
                            
                        </block>
                    </div>
                </el-collapse-item>
            </block>
        </el-collapse>
      </div>
    </div>

    
    
  </template>
  
  <script setup>
    import { ref,onMounted,computed,watch, nextTick } from 'vue'
    import { useRoute,useRouter } from 'vue-router'
    import { systemApi,userApi,httpApi } from '../../api/api'
    import { configStore } from '../../stores/config'
    import { Minus, Plus } from '@element-plus/icons-vue';
    import DOMPurify from 'dompurify';
    import { ElMessage } from 'element-plus';
  
    const config = configStore();
    const lessonData = ref({});
    const router = useRouter()
    const chapterList = ref([])
    const currentExam = ref({})
    const examDialogVisible = ref(false)
    const duration = ref(200)
    
  
    const init = async() => {
      lessonData.value = config.getBook()
      let res = await httpApi.getChapterWrong(lessonData.value)
      if(res.code){
        chapterList.value = res.data
        console.log("章列表",chapterList.value)
      }
    }

    const goExamDetail=(type,section_id)=>{
      router.push({
        name:"WrongExamDetail",
        query:{type:type, section_id:section_id}
      })
    }

    const getSectionWrong=async(chapterId,index)=>{
        let params = {
            chapter_id:chapterId
        }
        let res = await httpApi.getSectionWrong(params)
        console.log(res)
        if(res.code){
            console.log(res)
            chapterList.value.chapter[index].sectionList = res.data
            await nextTick()
        }
    }

    const handleChange=(activeNames)=>{
        console.log(activeNames[activeNames.length-1])
        let index = activeNames[activeNames.length-1]
        if(chapterList.value.chapter[index].sectionList == undefined){
            getSectionWrong(chapterList.value.chapter[index].chapter_id,index)
        }
    }
    
    // 科目变化时加载
    watch(() => config.$state.currentBook.book_id, () => {
      init()
    })
    
    onMounted(()=>{
      init()
    })
  
  </script>
  <style scoped>
    .linkText{cursor: pointer;}
  </style>